<template>
  <el-container class="container">
    <el-header>header
      <el-dropdown class="el-dropdown">
      <el-button type="text" icon="el-icon-user" style="color: black" circle>{{this.nickname}}</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button type="text">个人信息</el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button type="text" @click="quit">退出</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>
      <Aside></Aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>

    </el-container>
    <!-- <el-footer>
      别人骂我胖，我会生气，因为我心里承认了我胖。
      别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。
      这就是我们为什么会对别人的攻击生气。
      攻我盾者，乃我内心之矛
    </el-footer> -->
  </el-container>

</template>

<script>
import Aside from "../components/Aside";

export default {
  name: "Home",
  components: {Aside},
  data() {
    return {
      nickname:sessionStorage.getItem('userNickname')
    }
  },
  created() {

  },
  methods: {
    quit() {
      console.log('点击退出');
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

.container {
  height: 100%;
}

.el-header {
  background-color: #1891ff;
  font-size: 25px;
  display: flex;
  /*左右贴边*/
  justify-content: space-between;
  align-items: center;
}

.el-main {
  /*height: 100%;*/
  background-color: whitesmoke;
}
.el-dropdown>el-dropdown-item{
  width: 100%;
}
</style>